<template>
  <div>

    <!--  头部导航栏  -->
    <div>
      <el-menu
          :default-active="this.$route.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
          background-color="#fff"
          text-color="#333"
          active-text-color="#0084ff"
          style="flex:1"
      >
        <el-menu-item style="padding:0 10px" v-for="(item, i) in navList" :key="i" :index="item.name">
          <template slot="title">
            <span> {{ item.navItem }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>

    <!--  意见输入表单  -->
    <div>
      <el-form :label-position="labelPosition" model="form" :rules="rules" ref="form" label-width="80px"  class="advice-box">
        <h3>意见反馈</h3>
        <el-form-item  label="邮   箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item  label="意见标题" prop="advicetitle">
          <el-input v-model="form.title" placeholder="请输入意见标题"></el-input>
        </el-form-item>

        <el-form-item  label="意见内容" prop="content">
          <el-input type="textarea" :rows="3" v-model="form.content" placeholder="请输入意见内容"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary"  @click="submitAddress('form')">提交意见</el-button>

        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  name: "advice",
  data(){
    return{
      labelPosition: 'left',
      // 导航栏数据
      navList:[
        {name:'/index', navItem:'系统首页'},
        {name:'/advice',navItem:'意见反馈'},
        {name:'/login', navItem:'系统登录'},
        {name:'/register',navItem:'系统注册'}
      ],
      form: {
        identity: '',
        email: '',
        title: '',
        content: '',
      },
      rules: {
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'}
        ],
        advicetitle: [
          {required: true, message: '请输入意见标题', trigger: 'blur'}
        ],
        content: [
          {required: true, message: '请输入意见内容', trigger: 'blur'}
        ],
      }

    }
  },

  methods: {
      handleSelect(key, keyPath) {
      },

    // 提交意见反馈
    submitAddress(){

    }

  },
}
</script>

<style scoped>

.advice-box {

  width: 4.5rem;

  margin: 1.5rem auto;

  border: aqua;

  padding: 0.4rem;

  border-radius: 0.1rem;

  box-shadow: 0 0 0.3rem #2c3e50;
}
.el-menu {
  display: flex;
  flex-wrap: nowrap;
}

</style>